<template>
    <div class="form-page">
        <el-form
            ref="form"
            :model="form"
            :inline="true"
            label-width="10em"
            class="data-from"
        >
            <div class="form-item xy-start al-str">
                <div class="title">基础信息</div>
                <div class="yx-start al-start data">
                    <el-form-item prop="firstType" label="大类型">
                        <el-select
                            v-model="form.firstType"
                            clearable
                            :disabled="form.firstType != null"
                            @clear="cleanSecondType"
                            @change="selectQuestionType(form.firstType)"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="secondTypeId" label="试题类型">
                        <el-select
                            v-model="form.secondTypeId"
                            clearable
                            filterable
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in secondTypeIdOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="difficulty" label="难度">
                        <el-select
                            v-model="form.difficulty"
                            clearable
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in difficultyOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>

            <div class="form-item ">
                <div class="title">内容修改</div>
                <div>
                    <div>
                        <el-form-item prop="stem" label="题干">
                            <tinymce
                                v-if="showTinymce"
                                v-model="form.stem[0].vl"
                            />
                        </el-form-item>
                    </div>
                    <div>
                        <div v-if="status[form.firstType] === '单选题'">
                            <div
                                v-for="(item, index) in form.answer"
                                :key="index"
                            >
                                <el-form-item>
                                    <el-radio
                                        slot="label"
                                        v-model="form.rightAnswer"
                                        :label="item.option"
                                    >
                                        {{ item.option + "选项" }}
                                    </el-radio>
                                    <tinymce
                                        v-if="showTinymce"
                                        v-model="item.content[0].vl"
                                    />
                                </el-form-item>
                                <div style="float: right;padding-top: 10%">
                                    <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click.native="deleteAnswer(index)"
                                    ></el-button>
                                </div>
                            </div>
                            <div style="margin-left: 5%;height: 50px">
                                <el-button
                                    type="primary"
                                    @click.native="addAnswer"
                                    >添加选项</el-button
                                >
                            </div>
                        </div>
                        <div v-if="status[form.firstType] === '多选题'">
                            <el-checkbox-group v-model="form.rightAnswer">
                                <div
                                    v-for="(item, index) in form.answer"
                                    :key="index"
                                >
                                    <el-form-item>
                                        <el-checkbox
                                            slot="label"
                                            :label="item.option"
                                            >{{ item.option + "选项" }}
                                        </el-checkbox>
                                        <tinymce
                                            v-if="showTinymce"
                                            v-model="item.content[0].vl"
                                        />
                                    </el-form-item>
                                    <div style="float: right;padding-top: 10%">
                                        <el-button
                                            type="danger"
                                            icon="el-icon-delete"
                                            @click.native="deleteAnswer(index)"
                                        ></el-button>
                                    </div>
                                </div>
                            </el-checkbox-group>
                            <div style="margin-left: 5%;height: 50px">
                                <el-button
                                    type="primary"
                                    @click.native="addAnswer"
                                    >添加选项</el-button
                                >
                            </div>
                        </div>
                        <div>
                            <div
                                v-if="
                                    status[form.firstType] === '填空题' ||
                                        status[form.firstType] === '简答题'
                                "
                            >
                                <el-form-item prop="rightAnswer" label="答案">
                                    <tinymce
                                        v-if="showTinymce"
                                        v-model="form.rightAnswer[0].vl[0].vl"
                                    />
                                </el-form-item>
                            </div>
                            <div v-if="status[form.firstType] === '判断题'">
                                <el-form-item label="答案" prop="rightAnswer">
                                    <el-switch
                                        v-model="form.rightAnswer"
                                        active-value="1"
                                        inactive-value="0"
                                        active-color="#13ce66"
                                        active-text="正确"
                                        inactive-text="错误"
                                    ></el-switch>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div>
                        <el-form-item prop="answerDesc" label="试题解析">
                            <tinymce
                                v-if="showTinymce"
                                v-model="form.answerDesc[0].vl"
                            />
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-form>
        <div ref="submitDiv" class="form-item xy-center from-operation">
            <el-button
                type="primary"
                icon="el-icon-folder"
                :loading="submitFlag"
                @click="save"
                >保存
            </el-button>
            <el-button
                type="warning"
                icon="el-icon-delete-solid"
                :loading="submitFlag"
                @click="clickCancel('question')"
                >取消
            </el-button>
        </div>
    </div>
</template>

<script>
import { fetchQuestionType } from "@/api/exam.js";
import { FormPage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { get } from "@/api/request";
import Tinymce from "@/components/Tinymce";

export default {
    name: "EditQuestion",
    components: {
        Tinymce
    },
    mixins: [FormPage],
    data() {
        return {
            showTinymce: true,
            category: null,
            zeroOne: 0,
            options: [
                {
                    value: "singleChoice",
                    label: "单选题"
                },
                {
                    value: "multipleChoice",
                    label: "多选题"
                },
                {
                    value: "judgment",
                    label: "判断题"
                },
                {
                    value: "fill",
                    label: "填空题"
                },
                {
                    value: "text",
                    label: "简答题"
                },
                {
                    value: "combination",
                    label: "组合题"
                }
            ],
            difficultyOptions: [
                {
                    value: "easy",
                    label: "简单"
                },
                {
                    value: "normal",
                    label: "普通"
                },
                {
                    value: "difficult",
                    label: "困难"
                }
            ],
            secondTypeIdOptions: [],
            secondQueryData: {
                firstType: null
            },
            testAnswer: {
                1: {
                    tp: "text",
                    vl: "正确"
                },
                0: {
                    tp: "text",
                    vl: "错误"
                }
            },
            form: {
                id: null,
                classificationId: null,
                firstType: null,
                secondTypeId: null,
                difficulty: null,
                stem: [
                    {
                        tp: "html",
                        vl: ""
                    }
                ],
                answerDesc: [
                    {
                        tp: "html",
                        vl: ""
                    }
                ]
            },
            initAddForm: {
                id: null,
                viewName: null,
                remark: null,
                firstType: null
            },
            actions: null,
            actionSearch: null,
            formRules: {
                category: [
                    { required: true, message: "请选择！", trigger: "change" }
                ],
                classification: [
                    { required: true, message: "请选择！", trigger: "change" }
                ],
                firstType: [
                    { required: true, message: "请选择！", trigger: "change" }
                ],
                secondTypeId: [
                    { required: true, message: "请选择！", trigger: "change" }
                ],
                difficulty: [
                    { required: true, message: "请选择！", trigger: "change" }
                ],
                stem: [
                    { required: true, message: "不可为空！", trigger: "blur" }
                ],
                rightAnswer: [
                    { required: true, message: "不可为空！", trigger: "blur" }
                ],
                answerDesc: [
                    { required: true, message: "不可为空！", trigger: "blur" }
                ],
                answer: [
                    { required: true, message: "不可为空！", trigger: "blur" }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionFirstType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    activated() {
        this.showTinymce = true;
    },
    deactivated() {
        this.showTinymce = false;
    },
    methods: {
        async loadData(id) {
            return Promise.all([this.loadUserOld(id)]).catch(e => {
                console.error(e);
                this.$message.error("数据加载失败，请稍后在试");
            });
        },
        async loadUserOld(id) {
            if (!id) return;
            get(`/exam/question/detail/${id}`).then(result => {
                this.form = result;
                console.log("form:", this.form);
                // let typeVal = result.courseCategoryId;
                // this.category = typeVal;
                // this.form.classificationId = [];
                // ++this.zeroOne;
                // result.classificationId = result.classificationIds;
                // result.category = [typeVal];
                // this.category = result.category;
                // this.form = result;
                // this.form.rightAnswer = result.rightAnswer
                // this.secondQueryData.firstType = this.form.firstType
                // if (this.status[this.form.firstType] === "简答题") {
                //     this.form.rightAnswer = this.form.rightAnswer[0].vl
                // }
                fetchQuestionType(this.secondQueryData).then(res => {
                    for (let i = 0; i < res.length; i++) {
                        this.secondTypeIdOptions.push({
                            value: res[i].id,
                            label: res[i].viewName
                        });
                    }
                });
            });
        },
        save(item) {
            if (!item) {
                item = this.form;
            }
            // this.form.classificationId=this.$refs.classification.getCheckedNodes()[0].value
            // this.form.classificationId = 3
            // if (this.status[this.form.firstType] === "多选题") {
            //     this.form.rightAnswer.sort()
            // }
            // if (this.status[this.form.firstType] === "填空题") {
            //     let arr = this.form.rightAnswer.split("|")
            //     let trueAnswer = []
            //     for (let i = 0; i < arr.length; i++) {
            //         trueAnswer.push({tp: "text", vl: arr[i]})
            //     }
            //     this.form.rightAnswer = trueAnswer
            // }
            // if (this.status[this.form.firstType] === "简答题") {
            //     this.form.answer = [{
            //         tp: "html",
            //         pt: [0, 1]
            //     }]
            //     this.form.rightAnswer = [{
            //         tp: "html",
            //         vl: this.form.rightAnswer
            //     }]
            // }
            this.clickSave(
                "/exam/question/update-question",
                item,
                true,
                "question"
            );
        },
        indexMethod(index) {
            return (
                index +
                1 +
                (this.pageData.currentPage - 1) * this.pageData.pageSize
            );
        },
        handleSelectionChange(val) {
            this.ids = [];
            const length = val.length;
            for (let n = 0; n < length; n++) {
                this.ids.push(val[n].id);
            }
        },
        selectQuestionType(data) {
            this.cleanSecondType();
            this.secondTypeIdOptions = [];
            this.secondQueryData.firstType = data;
            fetchQuestionType(this.secondQueryData).then(res => {
                for (let i = 0; i < res.length; i++) {
                    this.secondTypeIdOptions.push({
                        value: res[i].id,
                        label: res[i].viewName
                    });
                }
            });
        },
        cleanSecondType() {
            delete this.form.secondTypeId;
        },
        addAnswer(item) {
            if (!item) {
                item = this.form;
            }
            let m = item.answer[this.form.answer.length - 1];
            if (m.option !== "Z") {
                let option = String.fromCharCode(m.option.charCodeAt(0) + 1);
                item.answer.push({
                    option: option,
                    content: [
                        {
                            tp: "html",
                            vl: ""
                        }
                    ]
                });
            } else {
                this.$message({
                    showClose: true,
                    message: "不可再增加选项",
                    type: "warning"
                });
            }
        },
        deleteAnswer(item, data) {
            if (!item) {
                item = this.form;
            }
            if (item.answer.length > 1) {
                item.answer.splice(data + 1, 1);
            } else {
                this.$message({
                    showClose: true,
                    message: "至少保留一个选项",
                    type: "warning"
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.quillEditor {
    min-height: 17em;
    width: 1000px;
}
</style>
